<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import PaperCard from '@/components/PaperCard.vue'
import { getSubjectListAPI } from '@/api/paper.js'
import { usePaperStore } from '@/stores'

const paperStore = usePaperStore()
const paperSearch = ref({
  id: localStorage.getItem('uid'),
  subjectId: '',
  keyword: '',
  paperType: '',
  pageIndex: 1,
  pageSize: 15
})
paperStore.getPaperList(paperSearch.value)

// 学科列表
const subjectList = ref([])
const getSubjectList = async () => {
  const { data: res } = await getSubjectListAPI()
  if (res.status === 200) {
    subjectList.value = res.data
  }
}
getSubjectList()

// 切换试卷类型
const tabItemClick = (e) => {
  document.querySelector('.active').classList.remove('active')
  e.target.classList.add('active')
  paperSearch.value.paperType = e.target.name
  paperStore.getPaperList(paperSearch.value)
}

// 换页
const pageChange = (page) => {
  paperSearch.value.pageIndex = page
  paperStore.getPaperList(paperSearch.value)
  window.scrollTo(0, 0)
}
</script>

<template>
  <div class="paper-container">
    <div class="paper-header">
      <div class="paper-header-tab">
        <span class="paper-header-tab-text">试卷类型：</span>
        <div class="paper-header-tab-item-box">
          <button
            class="paper-header-tab-item active"
            name=""
            @click="tabItemClick"
          >
            全部
          </button>
          <button class="paper-header-tab-item" name="1" @click="tabItemClick">
            固定试卷
          </button>
          <button class="paper-header-tab-item" name="4" @click="tabItemClick">
            时段试卷
          </button>
        </div>
      </div>
      <div class="paper-header-select-box">
        <div class="paper-header-select-search">
          <el-input
            :prefix-icon="Search"
            placeholder="请输入搜索关键字"
            size="large"
            v-model="paperSearch.keyword"
            clearable
            @change="paperStore.getPaperList(paperSearch)"
          ></el-input>
        </div>
        <div class="paper-header-select">
          <el-select
            v-model="paperSearch.subjectId"
            placeholder="请选择学科"
            size="large"
            clearable
            @change="paperStore.getPaperList(paperSearch)"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="paper-content" v-if="paperStore.paperTotal > 0">
      <PaperCard
        class="paper-content-item"
        v-for="item in paperStore.paperList"
        :key="item.id"
        :data="item"
      ></PaperCard>
    </div>
    <el-empty
      v-else
      description="暂无试卷"
      style="min-height: 3.2rem"
    ></el-empty>
    <el-pagination
      layout="prev, pager, next, jumper,total"
      :total="paperStore.paperList"
      :page-size="paperSearch.pageSize"
      prev-text="上一页"
      next-text="下一页"
      hide-on-single-page
      @current-change="pageChange"
    />
  </div>
</template>

<style lang="scss" scoped>
@media screen and (max-width: 1024px) {
  .paper-container {
    margin: 0.2rem 0.6rem;
    .paper-header {
      flex-direction: column;
      align-items: flex-start !important;
      padding-bottom: 0.14rem;
      .paper-header-tab {
        margin-bottom: 0.14rem;
      }
      .paper-header-select-box {
        display: flex;
        width: 100%;
        // flex-direction: column;
        .paper-header-select-search {
          flex: 1;
          max-height: 0.5rem;
          margin-bottom: 0.1rem;
          :deep(.el-input--large .el-input__wrapper) {
            padding: 0.01rem 0.15rem;
            font-size: 0.14rem;
          }
        }
        .paper-header-select {
          flex: 1;
          max-height: 0.4rem;
          :deep(.el-select--large .el-select__wrapper) {
            padding: 0.08rem 0.16rem;
            font-size: 0.14rem;
          }
        }
      }
    }

    .paper-content {
      display: flex;
      flex-wrap: wrap;
      min-height: 3.2rem;
      .paper-content-item {
        margin: 0 0.1rem 0.2rem;
        width: calc((100% - 0.4rem) / 2) !important;
      }
    }
    .el-pagination {
      justify-content: flex-end;
      &:deep(.el-icon) {
        font-size: 1.5rem;
      }
      &:deep(.el-pager) {
        .number {
          font-size: 0.16rem;
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }
}

.paper-container {
  margin: 0.2rem 0.6rem;
  .paper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.14rem;
    margin-bottom: 0.2rem;
    border-bottom: 0.01rem solid #e1e1e1;
    .paper-header-tab {
      display: flex;
      align-items: center;
      flex: 3;
      .paper-header-tab-text {
        font-size: 0.14rem;
      }
      .paper-header-tab-item-box {
        display: flex;
        .paper-header-tab-item {
          margin-right: 0.2rem;
          padding: 0.06rem;
          cursor: pointer;
          border: 0;
          background-color: transparent;
          border-radius: 0.06rem;
          font-size: 0.14rem;
          &.active {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }
    .paper-header-select-box {
      display: flex;
      flex: 1;
      .paper-header-select-search {
        margin-right: 0.1rem;
        display: flex;
        flex: 1;
      }
      .paper-header-select {
        flex: 1;
        display: flex;
      }
    }
  }

  .paper-content {
    display: flex;
    flex-wrap: wrap;
    min-height: 3.2rem;
    .paper-content-item {
      margin: 0 0.1rem 0.2rem;
      width: calc((100% - 1rem) / 5);
    }
  }
  .el-pagination {
    justify-content: flex-end;
    &:deep(.el-icon) {
      font-size: 1.5rem;
    }
    &:deep(.el-pager) {
      .number {
        font-size: 0.16rem;
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }
}
</style>
